<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/7/13
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <script>
        function show(id,e){
            document.getElementById("d1").style.display = "block";

            // 1.获取Ajax引擎对象
            let xhr = new XMLHttpRequest();

            // 2.准备回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    let result = xhr.responseText;
                    console.log(result);
                    let product = eval("("+result+")");
                    console.log(product);
                    document.getElementById("d1").style.left = e.clientX;
                    document.getElementById("d1").style.top = e.clientY;
                    document.getElementById("s1").innerHTML = product.id;
                    document.getElementById("s2").innerHTML = product.name;
                    document.getElementById("s3").innerHTML = product.price;
                }
            };

            // 3.建立连接,此时只是建立连接,尚未发送过去
            xhr.open("get","${pageContext.request.contextPath}/findById.product?id="+id,true);
            // 如果是post请求,需要指定请求头的Content-Type的方式
            // 4.发送请求
            xhr.send(null);


        }
        function hide(){
            document.getElementById("d1").style.display = "none";
        }
    </script>
</head>
<body>
<!--
    需求一:查询所有商品
        查询所有商品信息,直接使用传统web请求来实现
        查询购物车中商品表的数据,页面中展示所有的商品名
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li onmouseover="show(${product.id},event)" onmouseout="hide()">${product.name}</li>
    </c:forEach>
</ul>
<!--
    需求二:展示商品详情
        使用Ajax实现该功能,当鼠标悬停在某一个商品名的选项上时
        在鼠标旁边展示该商品的详细信息
        鼠标离开商品后,信息隐藏
-->
<hr>
<div id="d1" style="background: #dddddd; width: 200px; padding: 10px;display: none;position:absolute;">
    商品编号:<span id="s1"></span><br>
    商品名称:<span id="s2"></span><br>
    商品单价:<span id="s3"></span><br>
</div>
</body>
</html>
